<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:tang="">
<head>
    <meta charset="UTF-8"/>
    <title>edit</title>
    <link rel="stylesheet" th:href="@{/css/css.css}">
    <link rel="stylesheet" th:href="@{/JQuery-zTree-v3.5.15/css/zTreeStyle/zTreeStyle.css}">
    <style>
        ul.ztree {
            margin-top: 10px;
            border: 1px solid #617775;
            background: #f0f6e4;
            width: 220px;
            height: 200px;
            overflow-y: scroll;
            overflow-x: auto;
        }
    </style>
</head>
<body>

<form id="role" th:action="${#strings.equals(op,'新增')?'/role/create':'/role/'+role.id+'/update'}" method="post">

    <input type="hidden" name="id" th:value="${role.id}">
    <input type="hidden" name="salt" th:value="${role.available}">

    <div class="form-group">
        <label>角色名:</label>
        <input type="text" name="role" th:value="${role.role}">
    </div>

    <div class="form-group">
        <label>角色描述:</label>
        <input type="text" name="description" th:value="${role.description}">
    </div>


    <div class="form-group">
        <label>拥有资源列表:</label>
        <input type="hidden" id="resourceIds" name="resourceIds" th:value="${role.resourceIdsStr}">
        <input type="text" id="resourceName" name="resourceName"
               tang:replace_string="resource_list_value:${role.resourceIds}"/>
        <a id="menuBtn" href="#">选择</a>
    </div>
    <div class="form-group">
        <input type="submit" th:value="${op}">
    </div>

</form>

<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
    <ul id="tree" class="ztree" style="margin-top:0; width:160px;"></ul>
</div>

<script th:src="@{/js/jquery-1.11.0.min.js}"></script>
<script th:src="@{/JQuery-zTree-v3.5.15/js/jquery.ztree.all-3.5.min.js}"></script>
<script th:inline="javascript">
    $(function () {

        var setting = {
            check: {
                enable: true,
                chkboxType: {"Y": "", "N": ""}
            },
            view: {
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onCheck: onCheck
            }
        };

        var nodes = [[${resourceJsonStr}]];
        var jsonNodes = JSON.parse(nodes);
        var zNodes = new Array();
        var resourceIds = $("input[name='resourceIds']").val();
        var resourIdsArray = resourceIds.split(",");

        for (var i = 0; i < jsonNodes.length; i++) {
            var id = jsonNodes[i].id;
            var checkValue = contain(resourIdsArray, id);
            console.log(checkValue);

            if (!jsonNodes[i].rootNode) {
                zNodes.push({
                    id: id,
                    pId: jsonNodes[i].parentId,
                    name: jsonNodes[i].name,
                    checked: checkValue
                })
            }
        }

        function onCheck(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("tree"),
                    nodes = zTree.getCheckedNodes(true),
                    id = "",
                    name = "";
            nodes.sort(function compare(a, b) {
                return a.id - b.id;
            });
            for (var i = 0, l = nodes.length; i < l; i++) {
                id += nodes[i].id + ",";
                name += nodes[i].name + ",";
            }
            if (id.length > 0) id = id.substring(0, id.length - 1);
            if (name.length > 0) name = name.substring(0, name.length - 1);
            $("#resourceIds").val(id);
            $("#resourceName").val(name);
//                hideMenu();
        }

        function showMenu() {
            var cityObj = $("#resourceName");
            var cityOffset = $("#resourceName").offset();
            $("#menuContent").css({
                left: cityOffset.left + "px",
                top: cityOffset.top + cityObj.outerHeight() + "px"
            }).slideDown("fast");

            $("body").bind("mousedown", onBodyDown);
        }

        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }

        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }

        $.fn.zTree.init($("#tree"), setting, zNodes);
        $("#menuBtn").click(showMenu);
    });

    function contain(container, elem) {
        for (var i = 0; i < container.length; i++) {
            if (container[i] == elem) {
                return true;
            }
        }
        return false;
    }
</script>

</body>
</html>